/**
 * Created by a1 on 16/5/9.
 */

var cPause = "pause"
var cPageCurrent = "pageCurrent"
//var cVisiable = "visible"
var MaxDuration = 500

var widthScreen = 0
var heightScreen = 0
var touchBegin = false
var startY = 0
var isAnimating = false

var arrayPage = []
var currentIndex = 0
var count = 0

var pageCurrent
var pagePre
var pageNext

var arrayInitPage = []

$(function() {
    init()
})

function init() {
    //alert("init")
    widthScreen = $(window).width()
    heightScreen = $(window).height()
    //alert("height = " + heightScreen)

    var music = document.getElementById("music")
    $("#btnMusic").click(function() {
        if(music.paused) {
            music.play()
            $(this).removeClass(cPause)
        }else {
            music.pause()
            $(this).addClass(cPause)
        }
    })

    $("body").on("vmousedown", onMouseDown)
    $("body").on("vmousemove", onMouseMove)
    $("body").on("vmouseup", onMouseUp)

    $("#btnPre").click(function() {
        animPre()
    })

    $("#btnNext").click(function() {
        animNext()
    })

    arrayPage = $("#container div[data-role='content']")
    count = arrayPage.length
    resetCurrent(0)
}

function resetCurrent(current) {
    if(pageCurrent != null) {
        pageCurrent.removeClass(cPageCurrent)
    }
    currentIndex = (current + count) % count
    pageCurrent = $(arrayPage[currentIndex])
    pageCurrent.addClass(cPageCurrent)

    pagePre = $(arrayPage[(currentIndex - 1 + count) % count])
    pagePre.css({"top": -(heightScreen+32)+"px"})
    pageNext = $(arrayPage[(currentIndex + 1) % count])
    pageNext.css({"top": "100%"})
    //alert("pageCurrent = " + pageCurrent.position().top)
    //alert("pagePre = " + (pagePre.position().top + pagePre.height()))

    //if($.inArray(currentIndex, arrayInitPage) < 0) {
    //    arrayInitPage.push(currentIndex)
    //}
}

function animCurrent() {
    if(isAnimating) {
        return
    }
    var offsetY = pagePre.position().top + heightScreen
    if(offsetY > 0) {
        isAnimating = true
        var duration = offsetY / heightScreen * MaxDuration
        pagePre.animate(
            {
                top: -heightScreen
            },
            duration, "easeOutCubic", function() {
                isAnimating = false
            })
    }else {
        offsetY = pageNext.position().top - heightScreen
        if(offsetY < 0) {
            isAnimating = true
            var duration = -offsetY / heightScreen * MaxDuration
            pageNext.animate(
                {
                    top: heightScreen
                },
                duration, "easeOutCubic", function(){
                    isAnimating = false
                })
        }
    }
}

function animNext() {
    if(isAnimating) {
        return
    }
    //$.mobile.changePage($("#page_2"), "slide")
    isAnimating = true
    var offsetY = pageNext.position().top
    var duration = offsetY / heightScreen * MaxDuration
    pageNext.animate(
        {
            top: 0
        },
        duration, "easeOutCubic", function() {
            resetCurrent(currentIndex + 1)
            isAnimating = false
        })
}

function animPre() {
    if(isAnimating) {
        return
    }
    isAnimating = true
    var offsetY = pagePre.position().top
    var duration = -offsetY / heightScreen * MaxDuration
    pagePre.animate(
        {
            top: 0
        },
        duration, "easeOutCubic", function(){
            resetCurrent(currentIndex - 1)
            isAnimating = false
        })
}

function onMouseDown(e) {
    if(!isAnimating) {
        startY = e.pageY
        touchBegin = true
    }
}

function onMouseMove(e) {
    if(touchBegin) {
        var offsetY = e.pageY - startY
        if(offsetY < 0) {
            pageNext.css({"top": heightScreen + offsetY + "px"})
            pagePre.css({"top": -(heightScreen+32) + "px"})
        }else if (offsetY > 0) {
            pageNext.css({"top": heightScreen + "px"})
            pagePre.css({"top": -heightScreen + offsetY + "px"})
        }
    }
}

function onMouseUp() {
    if(touchBegin) {
        touchBegin = false
        //alert("top = " + pageNext.position().top)
        if(pageNext.position().top < heightScreen * 0.75) {
            animNext()
        }else if (pagePre.position().top > -heightScreen * 0.75) {
            animPre()
        }else {
            animCurrent()
        }
    }
}